// 渐变堆叠面积图组件
import BaseLineChartComponent from "./base-line-chart.js";

class GradientStackedAreaChart extends BaseLineChartComponent {
    constructor() {
        super();
    }
    
    // 重写默认配置
    getDefaultConfig() {
        const config = super.getDefaultConfig();
        config.seriesAttrs = [
            ...config.seriesAttrs,
            ['series-areastyle-show_radio', true],  // 开启面积显示
            ['line-areastyle-color-gradient-show_radio', false],  // 开启渐变
            ['series-stack_text', 'Total']  // 开启堆叠
        ];
        
        return config;
    }
    
    // 重写默认数据 - 适合渐变堆叠展示的数据
    getDefaultData() {
        return [
            {
                "直接访问": [
                    { "name": "1月", "value": 1200 },
                    { "name": "2月", "value": 1500 },
                    { "name": "3月", "value": 1800 },
                    { "name": "4月", "value": 2000 },
                    { "name": "5月", "value": 2300 },
                    { "name": "6月", "value": 2500 }
                ]
            },
            {
                "外部链接": [
                    { "name": "1月", "value": 800 },
                    { "name": "2月", "value": 1000 },
                    { "name": "3月", "value": 1200 },
                    { "name": "4月", "value": 1400 },
                    { "name": "5月", "value": 1600 },
                    { "name": "6月", "value": 1800 }
                ]
            },
            {
                "搜索引擎": [
                    { "name": "1月", "value": 1500 },
                    { "name": "2月", "value": 1800 },
                    { "name": "3月", "value": 2100 },
                    { "name": "4月", "value": 2400 },
                    { "name": "5月", "value": 2700 },
                    { "name": "6月", "value": 3000 }
                ]
            }
        ];
    }
    
    // 生成系列配置 - 确保是渐变堆叠面积图
    generateSeries(dataDemo, seriesConfig) {
        const defaultGradients = this.getDefaultGradients();
        const series = super.generateSeries(dataDemo, seriesConfig);

        // 解析各类配置项（处理字符串布尔值和颜色列表）
        const isAreaShow = seriesConfig.areastyleShow === 'true' || seriesConfig.areastyleShow === true;
        const isGradientEnabled = seriesConfig.areastyleColorGradientShow === 'true' || seriesConfig.areastyleColorGradientShow === true;

        // 解析颜色列表（优先级：start/end列表 > 整体colorlist > 默认渐变）
        const areaColorList = seriesConfig.areastyleColor
            ? seriesConfig.areastyleColor.split(',').map(color => color.trim()).filter(Boolean)
            : [];
        const startColorList = seriesConfig.areastyleColorStart
            ? seriesConfig.areastyleColorStart.split(',').map(color => color.trim()).filter(Boolean)
            : [];
        const endColorList = seriesConfig.areastyleColorEnd
            ? seriesConfig.areastyleColorEnd.split(',').map(color => color.trim()).filter(Boolean)
            : [];

        return series.map((s, index) => {
            const gradientIndex = index % defaultGradients.length;
            const defaultGradient = defaultGradients[gradientIndex];
            let areaStyle = {};

            // 仅当开启面积显示时才处理颜色逻辑
            if (isAreaShow) {
                let startColor, endColor;

                // 1. 优先使用单独的起始色/结束色列表
                if (startColorList.length > 0) {
                    startColor = startColorList[index % startColorList.length];
                } else {
                    // 2. 无单独起始色时，从整体colorlist取或用默认
                    startColor = areaColorList.length > 0
                        ? areaColorList[(index * 2) % areaColorList.length]
                        : defaultGradient.start;
                }

                if (endColorList.length > 0) {
                    endColor = endColorList[index % endColorList.length];
                } else {
                    // 2. 无单独结束色时，从整体colorlist取或用默认
                    endColor = areaColorList.length > 0
                        ? (areaColorList[(index * 2 + 1) % areaColorList.length] || areaColorList[(index * 2) % areaColorList.length])
                        : defaultGradient.end;
                }

                // 根据渐变开关决定颜色模式
                if (isGradientEnabled) {
                    areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: startColor },
                        { offset: 1, color: endColor }
                    ]);
                } else {
                    areaStyle.color = startColor; // 纯色模式用起始色
                }
            } else {
                // 不显示面积时清空样式
                areaStyle = { show: false };
            }

            return {
                ...s,
                smooth: true,
                stack: 'Total',
                areaStyle: isAreaShow ? areaStyle : undefined // 不显示时可省略areaStyle
            };
        });
    }
}

// 定义自定义元素
customElements.define('gradient-stacked-area-chart', GradientStackedAreaChart);
